<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>APP维护</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!--    头部-->
    <i th:replace="~{dev/app/common :: head}"></i>
<!--左侧-->
    <i th:replace="~{dev/app/common :: left}"></i>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>分类查询APP</legend>
        </fieldset>

<!--        查询条件-->
        <form class="layui-form" action="">
<!--             第一行-->
            <div class="layui-form-item">
<!--                第一列-->
                <div class="layui-inline">
                    <label class="layui-form-label">软件名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="softwareName" name="softwareName"  autocomplete="off" class="layui-input">
                    </div>
                </div>
<!--                第二列-->
                <div class="layui-inline">
                    <label class="layui-form-label">所属平台</label>
                    <div class="layui-input-inline">
                        <select id="flatformId" name="flatformId" class="layui-input" >
                            <option value="">请选择所属平台</option>
                            <option th:each="f : ${flatformList}" th:value="${f.valueId}" th:text="${f.valueName}">无</option>
                        </select>
                    </div>
                </div>
<!--                第三列-->
                <div class="layui-inline">
                    <label class="layui-form-label">软件状态</label>
                    <div class="layui-input-inline">
                        <select id="appStatus" name="appStatus" class="layui-input"  >
                            <option value="">请选择软件状态</option>
                            <option th:each="s : ${statusList}" th:value="${s.valueId}" th:text="${s.valueName}">无</option>
                        </select>
                    </div>
                </div>
            </div>
<!--            第二行-->
            <div class="layui-form-item">
                <label class="layui-form-label">分类查询</label>
<!--                第一列-->
                <div class="layui-input-inline">
                    <select name="levelOne" lay-filter="levelOne" id="levelOne">
                        <option value="">请选择一级分类</option>
                        <option th:each="l : ${levelOneList}" th:value="${l.id}" th:text="${l.categoryName}">无</option>
                    </select>
                </div>
<!--                第二列-->
                <div class="layui-input-inline">
                    <select name="levelTwo" lay-filter="levelTwo" id="levelTwo">
                        <option value="">请选择二级分类</option>
                    </select>
                </div>
<!--                第三列-->
                <div class="layui-input-inline">
                    <select name="levelThree" lay-filter="levelThree" id="levelThree">
                        <option value="">请选择三级分类</option>
                    </select>
                </div>
            </div>
<!--            查询按钮-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" id="selectBut" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>


        </form>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>APP信息展示</legend>
        </fieldset>
<!--        数据表格-->
        <table class="layui-hide" id="appMaintain" lay-filter="appMaintain"></table>
<!--        表格头部工具栏-->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-radius" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
                <button class="layui-btn layui-btn-warm layui-btn-radius" lay-event="up"><i class="layui-icon layui-icon-up"></i>上架</button>
                <button class="layui-btn layui-btn-warm layui-btn-radius" lay-event="down"><i class="layui-icon layui-icon-down"></i>下架</button>
                <button class="layui-btn layui-btn-danger layui-btn-radius" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</button>
            </div>
        </script>
<!--        表格右侧操作栏-->
        <script type="text/html" id="barDemo">
            <button class="layui-btn                  layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add-version"><i class="layui-icon layui-icon-add-circle"></i>新增APP版本</button>
            <button class="layui-btn                   layui-btn-sm" lay-event="edit-version"><i class="layui-icon layui-icon-edit"></i>编辑APP版本</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="show"><i class="layui-icon layui-icon-search"></i>查看</button>
        </script>



    </div>

<!--底部-->
    <i th:replace="~{dev/app/common :: footer}"></i>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/app.js}"></script>
<script th:inline="none">



    //JavaScript代码区域
    layui.use(['element','form','table'], function(){
        var element = layui.element;
        var form = layui.form;
        var $ = layui.$;
        var table = layui.table;


        //监听一级分类下拉列表的改变
        form.on('select(levelOne)', function(data){
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            findLevelTwo(data,form,$);

        });

        //监听二级分类下拉列表的改变
        form.on('select(levelTwo)', function(data){
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            findLevelThree(data,form,$);

        });


        //表格的初始化
        table.render({
            elem: '#appMaintain'
            //可以向一个 .json 文件中获取表格数据
            ,url:baseUrl+'dev/app/table-list'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', sort: true}
                ,{field:'softwareName', title:'软件名称'}
                ,{field:'softwareSize', title:'软件大小'}
                ,{field:'flatformName', title:'所属平台'}
                ,{field:'appStatusName', title:'软件状态'}
                ,{field:'categoryLevel1Name', title:'一级分类'}
                ,{field:'categoryLevel2Name', title:'二级分类'}
                ,{field:'categoryLevel3Name', title:'三级分类'}
                ,{field:'downloads', title:'下载次数', sort: true}
                ,{field:'versionName', title:'版本号'}

                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:410}
            ]]
            ,page: true
        });


        //查询指定条件
        $("#selectBut").click(function () {

            table.reload('appMaintain', {
                url: baseUrl+'dev/app/table-list'
                ,where: {
                    softwareName:$("#softwareName").val(),
                    flatformId:$("#flatformId").val(),
                    appStatus:$("#appStatus").val(),
                    levelOne:$("#levelOne").val(),
                    levelTwo:$("#levelTwo").val(),
                    levelThree:$("#levelThree").val()

                } //设定异步数据接口的额外参数

            });

        });


        //表头工具栏事件
        table.on('toolbar(appMaintain)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2,
                        content: baseUrl+"dev/app/add-appInfo-ui",
                        area: ['1000px', '750px'],
                        end:function () {
                            table.reload('appMaintain', {//刷新表格数据
                                url: baseUrl+'dev/app/table-list'
                                ,where: {
                                    softwareName:$("#softwareName").val(),
                                    flatformId:$("#flatformId").val(),
                                    appStatus:$("#appStatus").val(),
                                    levelOne:$("#levelOne").val(),
                                    levelTwo:$("#levelTwo").val(),
                                    levelThree:$("#levelThree").val()

                                } //设定异步数据接口的额外参数

                            });
                        }
                    });
                    break;
                case 'up':
                    var checkStatus = table.checkStatus('appMaintain'); //idTest 即为基础参数 id 对应的值

                    var dataArray = checkStatus.data //获取选中行的数据

                    if (dataArray.length==0){
                        layer.msg("上架商品不能为空！请重新选择！")
                        return;
                    }

                    var ids = []
                    for (var i =0;i<dataArray.length;i++){
                        if (dataArray[i].appStatus==1||dataArray[i].appStatus==3||dataArray[i].appStatus==4){
                            layer.msg(dataArray[i].softwareName+"的状态为："+dataArray[i].appStatusName+"，不能执行上架操作！")
                            return;
                        }
                        ids.push(dataArray[i].id)
                    }
                     $.post(
                         baseUrl+"dev/app/up",
                         {ids:ids},
                         function (result) {
                             if (result.code==0){
                                 layer.msg("上架成功")
                                 table.reload('appMaintain', {//刷新表格数据
                                     url: baseUrl+'dev/app/table-list'
                                     ,where: {
                                         softwareName:$("#softwareName").val(),
                                         flatformId:$("#flatformId").val(),
                                         appStatus:$("#appStatus").val(),
                                         levelOne:$("#levelOne").val(),
                                         levelTwo:$("#levelTwo").val(),
                                         levelThree:$("#levelThree").val()

                                     } //设定异步数据接口的额外参数

                                 });
                             } else {
                                 layer.msg(result.msg)
                             }
                         },
                         "json"
                     );



                    break;
                case 'down':
                    var checkStatus = table.checkStatus('appMaintain'); //idTest 即为基础参数 id 对应的值

                    var dataArray = checkStatus.data //获取选中行的数据

                    if (dataArray.length==0){
                        layer.msg("下架商品不能为空！请重新选择！")
                        return;
                    }

                    var ids = []
                    for (var i =0;i<dataArray.length;i++){
                        if (dataArray[i].appStatus!=4){
                            layer.msg(dataArray[i].softwareName+"的状态为："+dataArray[i].appStatusName+"，不能执行下架操作！")
                            return;
                        }
                        ids.push(dataArray[i].id)
                    }
                    $.post(
                        baseUrl+"dev/app/down",
                        {ids:ids},
                        function (result) {
                            if (result.code==0){
                                layer.msg("下架成功")
                                table.reload('appMaintain', {//刷新表格数据
                                    url: baseUrl+'dev/app/table-list'
                                    ,where: {
                                        softwareName:$("#softwareName").val(),
                                        flatformId:$("#flatformId").val(),
                                        appStatus:$("#appStatus").val(),
                                        levelOne:$("#levelOne").val(),
                                        levelTwo:$("#levelTwo").val(),
                                        levelThree:$("#levelThree").val()

                                    } //设定异步数据接口的额外参数

                                });
                            } else {
                                layer.msg(result.msg)
                            }
                        },
                        "json"
                    );

                    break;
                case 'del':
                    var checkStatus = table.checkStatus('appMaintain'); //idTest 即为基础参数 id 对应的值

                    var dataArray = checkStatus.data //获取选中行的数据

                    if (dataArray.length==0){
                        layer.msg("要删除的商品不能为空！请重新选择！")
                        return;
                    }
                    var ids = []
                    for (var i =0;i<dataArray.length;i++){
                        ids.push(dataArray[i].id)
                    }

                    $.post(
                        baseUrl+"dev/app/delete",
                        {ids:ids},
                        function (result) {
                            if (result.code==0){
                                layer.msg("删除成功")
                                table.reload('appMaintain', {//刷新表格数据
                                    url: baseUrl+'dev/app/table-list'
                                    ,where: {
                                        softwareName:$("#softwareName").val(),
                                        flatformId:$("#flatformId").val(),
                                        appStatus:$("#appStatus").val(),
                                        levelOne:$("#levelOne").val(),
                                        levelTwo:$("#levelTwo").val(),
                                        levelThree:$("#levelThree").val()

                                    } //设定异步数据接口的额外参数

                                });
                            } else {
                                layer.msg(result.msg)
                            }
                        },
                        "json"
                    );


                    break;

            };
        });


        //行工具栏事件
        table.on('tool(appMaintain)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'edit'){ //编辑
                layer.msg("编辑")
                layer.open({
                    title: '编辑'
                    ,content: baseUrl+'dev/app/editApp-ui?id='+data.id
                    ,type:2
                    ,area: ['1000px', '750px']
                    ,end:function () {
                    table.reload('appMaintain', {//刷新表格数据
                        url: baseUrl+'dev/app/table-list'
                        ,where: {
                            softwareName:$("#softwareName").val(),
                            flatformId:$("#flatformId").val(),
                            appStatus:$("#appStatus").val(),
                            levelOne:$("#levelOne").val(),
                            levelTwo:$("#levelTwo").val(),
                            levelThree:$("#levelThree").val()

                        } //设定异步数据接口的额外参数

                    });
                }
                })
                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }else if(layEvent === 'add-version'){//新增APP版本


                layer.open({
                    title: '新增APP版本'
                    ,content: baseUrl+'dev/app/addAppVersion-ui?id='+data.id
                    ,type:2
                    ,area: ['1000px', '750px']
                    ,end:function () {

                        var localTest = layui.sessionData('VersionTale');
                        var versionNo = localTest.versionNo;

                        if (versionNo!=null && versionNo!='') {
                            obj.update({
                                versionName: versionNo
                            });
                            //移除sessionStorage 的缓存
                            layui.sessionData('VersionTale', {
                                key: 'versionNo'
                                ,remove: true
                            });
                        }
                    }
                });

            } else if(layEvent === 'edit-version'){ //编辑APP版本


                layer.open({
                    title: '新增APP版本'
                    ,content: baseUrl+'dev/app/editAppVersion-ui?id='+data.id
                    ,type:2
                    ,area: ['1000px', '750px']
                    ,end:function () {

                        var localTest = layui.sessionData('VersionTale');
                        var versionNo = localTest.versionNo;

                        if (versionNo!=null && versionNo!='') {
                            obj.update({
                                versionName: versionNo
                            });
                            //移除sessionStorage 的缓存
                            layui.sessionData('VersionTale', {
                                key: 'versionNo'
                                ,remove: true
                            });
                        }
                    }
                });
            }  else if(layEvent === 'show'){ //查看
                layer.msg("查看")

            }
        });




















    });











</script>
</body>
</html>